<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<child :level="level">hello world</child>
		</div>
	</body>
</html>


<script type="text/tpl" id="tpl">
	<div>
		<h1 v-if="level == 1">
			<slot></slot>
		</h1>
		<h2 v-if="level == 2">
			<slot></slot>
		</h2>
		<h3 v-if="level == 3">
			<slot></slot>
		</h3>
		<h4 v-if="level == 4">
			<slot></slot>
		</h4>
		<h5 v-if="level == 5">
			<slot></slot>
		</h5>
		<h6 v-if="level == 6">
			<slot></slot>
		</h6>
	</div>
</script>

<script type="text/javascript">
	const child = {
		template: '#tpl',
		props: ['level']
	}
	
	new Vue({
		el: '#app',
		data: {
			level: 6
		},
		components: {
			child
		}
	})
</script>
